<template>
    <admin-container class="home" hidden-title>
        <div class="head">
            <h2>工作台</h2>

            <div class="greetings">
                <div class="greetings-message">
                    {{ date }}，欢迎您使用{{ systemConfig.title }}。
                </div>
            </div>
        </div>

        <div class="console-box">
            <el-row>
                <el-col :span="16" style="padding: 0 12px">
                    <el-card>
                        <template #header>动态</template>

                        <div style="text-align: center" v-show="activeLoading">
                            加载中...
                        </div>
                        <ul class="active-list" v-show="!activeLoading">
                            <li v-for="item in active_list" :key="item.id">
                                <div class="active-avatar">
                                    <div class="ke-avatar">
                                        <img :src="item.user.avatar"/>
                                    </div>
                                </div>
                                <div class="active-content">
                                    <div class="active-content-title">
                                        {{ item.user.nickname }}
                                        {{ item.message }}
                                    </div>
                                    <div class="active-content-description">
                                        <span>{{ item.create_time }}</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </el-card>
                </el-col>

                <el-col :span="8" style="padding: 0 12px">
                    <el-card>
                        <template #header>快捷导航</template>

                        <div class="quick">
                            <span class="quick-item"
                                  v-for="(item, idx) in qucikButton"
                                  :key="idx"
                                  @click="onClickQuickRedirect(item)"
                            >
                                {{ item.text }}

                                <span title="删除" @click.stop="onClickQuickRemove(item)">
                                    <i class="el-icon-close"></i>
                                </span>
                            </span>
                            <span class="quick-item">
                                <el-button size="small"
                                           icon="el-icon-plus"
                                           @click="onAddQuick"
                                >
                                    添加
                                </el-button>
                            </span>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <el-dialog :visible.sync="dialogQuick" title="添加快捷导航">
            <ul class="quick-container">
                <li class="quick-slider">
                    <template v-for="(item, idx) in routes">
                        <div :key="idx"
                             v-if="quickVisible(item)"
                             @click="onCLickQuickLeft(item, idx)"
                             class="quick-slider-btn"
                             :class="{ active: idx === quickActive }"
                        >
                            {{ quickTitle(item) }}
                        </div>
                    </template>
                </li>
                <li class="quick-content">
                    <span v-for="(sub, idx) in quickList"
                          :key="idx"
                          @click="onCLickQuickLeft(sub, -1)"
                          class="quick-link">
                            {{ quickTitle(sub) }}
                    </span>
                </li>
            </ul>
        </el-dialog>
    </admin-container>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import { ActionActiveModel } from '@/models/action-active.model';
import AdminContainer from '@/components/admin-container.vue';
import { SystemConfigModel, SystemModule } from '@/store/system';
import { getAdminActionLogs } from '@/services/action.log.service';
import { AuthModule } from '@/store/auth';
import { RouteConfig } from 'vue-router';
import { QuickModule } from '@/store/quick';
dayjs.locale('zh-cn')
@Component({
    components: { AdminContainer }
})
export default class Index extends Vue {
    greetings: string = '';
    active_list: ActionActiveModel[] = [];
    dialogQuick: boolean = false;
    quickActive: number = -1;
    activeLoading: boolean = true;

    get date() {
        return dayjs().format('YYYY年MM月DD日 dddd');
    }

    get systemConfig(): SystemConfigModel {
        return SystemModule.config;
    }

    // 初始化
    mounted() {
        this.activeLoading = true;
        getAdminActionLogs({ limit: 20 })
            .finally(() => {
                this.activeLoading = false;
            })
            .then(result => {
                this.active_list = result.data.items;
            })
    }

    get routes(): any[] {
        return AuthModule.routes;
    }

    get qucikButton(): any[] {
        return QuickModule.list;
    }

    onAddQuick() {
        this.dialogQuick = true;
    }

    quickVisible(item: RouteConfig): boolean {
        if (item.name === 'index') {
            return false;
        }
        if (item.children && item.children.length === 1) {
            return true;
        }
        return true;
    }

    quickTitle(item: RouteConfig): string {
        if (item.children && item.children.length === 1) {
            return item.children[0].meta?.title;
        }
        return item.meta?.title;
    }

    get quickList(): any[] {
        if (this.quickActive === -1) {
            return [];
        }
        return AuthModule.routes[this.quickActive].children.filter((_: any) => {
            return !_.hidden;
        });
    }

    onClickQuickRemove(item: any) {
        QuickModule.delBtn(item.route);
    }

    onClickQuickRedirect(item: any) {
        console.log(item)
        this.$router.push({ name: item.route })
    }

    /**
     * 左侧按钮点击
     * @param item
     * @param idx
     */
    onCLickQuickLeft(item: RouteConfig, idx: number) {
        if (item.children && item.children.length > 1) {
            this.quickActive = idx;
        } else if(item.children && item.children.length === 1) {
            QuickModule.addBtn({
                text: item.children[0].meta?.title as string,
                route: item.children[0].name as string,
            });
            this.dialogQuick = false;
        } else {
            QuickModule.addBtn({
                text: item.meta?.title as string,
                route: item.name as string,
            });
            this.dialogQuick = false;
        }
    }
}
</script>

<style scoped lang="scss">
.head {
    padding: 24px 36px;
}
.greetings {
    &-message {
        font-size: 14px;
        color: #333;
    }
}
.console-box {
    padding: 0 24px;
    margin-bottom: 20px;
}

.active {
    &-list {
        li {
            padding: 20px 24px;
            border-bottom: solid 1px #f0f0f0;
            display: flex;
            &:last-child {
                border: none;
            }
        }
    }
    &-avatar {
        margin-right: 16px;
    }
    &-content {
        flex: 1;
        font-size: 14px;
        color: rgba(0,0,0,.65);
        &-title {
            line-height: 22px;
        }
        &-description {
            font-size: 13px;
            margin-top: 8px;
            color: rgba(0,0,0,.25);
        }
    }
}

.quick {
    line-height: 1.5715;
    &-item {
        font-size: 14px;
        width: 25%;
        margin-bottom: 13px;
        display: inline-block;
        cursor: pointer;
        transition: all .3s;
        &:hover {
            color: #1890ff;
        }
    }
    &-container {
        display: flex;
    }
    &-slider {
        flex: 0 0 140px;
        border-right: solid 1px #efefef;
        &-btn {
            padding: 8px 12px;
            cursor: pointer;
            margin: 5px 0;
            &:hover {
                background: #8c8c8c;
                color: #fff;
            }
        }
        &-btn.active {
            background: #8c8c8c;
            color: #fff;
        }
    }
    &-link {
        color: #1890ff;
        display: inline-block;
        padding: 5px 10px;
        cursor: pointer;
    }
}
</style>
